<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    import type { BloggerInfo } from '@/services/type';
    import { api } from '@/services/api';

    import UserIcon from "@/assets/image/user-icon.jpg";

    // 博主信息
    const bloggerInfo = ref<BloggerInfo>();

    onMounted(async () => {
        const response = await api.home.getBloggerInfo();
        // 如果状态返回失败
        if(response.code !== 0) return; 
        // 博主信息赋值
        bloggerInfo.value = response.data;
    });

</script>
<template>
    <section class="sidebar_widget widget_post_author">
        <section class="author_info">
            <div class="widget_avatar animation">
                <a title="回忆里依稀" class="widget_avatar pic animate">
                    <el-avatar :size="85" class="widget_avatar" :src="UserIcon"></el-avatar>
                    <div class="widget-cover auvip1 vip3"></div>
                </a>
            </div>
            <h4><label>{{ bloggerInfo?.blogger_name }}</label><span class="admin_field">博主</span></h4>
            <p><label>{{ bloggerInfo?.blogger_signature }}</label></p>
            <div class="social-media">
                <el-button type="primary" plain>
                    <el-icon class="el-icon--left"><Plus /></el-icon>&nbsp;关注
                </el-button>
                <el-button type="info">
                    <el-icon class="el-icon--left"><Message /></el-icon>&nbsp;私信
                </el-button>
            </div>
            <!---->
        </section>
        <section class="author_count">
            <ul>
                <li style="padding: 5px;"><span>文章</span><strong>{{ bloggerInfo?.site_count_info ? bloggerInfo?.site_count_info.article_count:0 }}</strong></li>
                <li style="padding: 5px;"><span>评论</span><strong>{{ bloggerInfo?.site_count_info ? bloggerInfo?.site_count_info.comment_count:0 }}</strong></li>
                <li style="padding: 5px;"><span>浏览</span><strong>{{ bloggerInfo?.site_count_info ? bloggerInfo?.site_count_info.browse_count:0 }}</strong></li>
            </ul>
        </section>
    </section>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />